<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        #app {
            width: 100%;
            height: 100%;
            position: relative;
            background-color: pink;
        }
    </style>
</head>

<body>
<div id="app">

</div>


<script>
    var app = document.querySelector('#app');
    var currentDistance = 0;
    var scaleWidth = app.offsetWidth;
    app.addEventListener('touchstart', function (event) {
        event.stopPropagation()
        event.preventDefault()
        const touches = event.touches
        const events = touches[0]
        const events2 = touches[1]

        if (events2) {
            currentDistance = ~~getDistance(
                {x: events.pageX, y: events.pageY},
                {x: events2.pageX, y: events2.pageY}
            );

            document.addEventListener('touchmove', touchmove)

            document.addEventListener('touchend', touchend)
        }
    });

    function touchmove(event) {
        event.stopPropagation()
        event.preventDefault()
        const touches = event.touches
        const events = touches[0]
        const events2 = touches[1]

        if (events2) {
            var distance = ~~getDistance({x: events.pageX, y: events.pageY}, {x: events2.pageX, y: events2.pageY});
            scaleWidth = scaleWidth + (distance - currentDistance);
            app.style.transform = `scale(${scaleWidth / app.offsetWidth})`;
            // app.style.width = scaleWidth + 'px';
            currentDistance = distance;
        }
    }

    function touchend() {
        currentDistance = 0;
        document.removeEventListener('touchmove', touchmove);
        document.removeEventListener('touchend', touchend);
    }

    function getDistance(coordA, coordB) {
        var a = coordA.x - coordB.x;
        var b = coordA.y - coordB.y;

        return Math.sqrt(a * a + b * b);
    }
</script>
</body>

</html>